<template>
  <div>
    <div class="loading">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.loading {
  width: 40px;
  height: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  animation: rotate 1.3s linear infinite;
}

.loading div {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #1890ff;
}

.loading div:nth-child(2) {
  opacity: 0.8;
}

.loading div:nth-child(3) {
  opacity: 0.6;
}

.loading div:nth-child(4) {
  opacity: 0.4;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
</style>
